<!DOCTYPE HTML>
<html lang="zxx">

<head>
    <title>用户登录</title>
    <!-- Meta tag Keywords -->
    <link rel="SHORTCUT ICON" href="../static/img/icon.png">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8"/>
    <meta name="keywords"
          content="Triple Forms Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements"/>
    <script>
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!-- Meta tag Keywords -->

    <!-- css files -->
    <link rel="stylesheet" href="../static/css/style.css" type="text/css" media="all"/>
    <!-- Style-CSS -->
    <link href="../static/css/font-awesome.min.css" rel="stylesheet">
    <!-- Font-Awesome-Icons-CSS -->
    <!-- //css files -->

    <!-- web-fonts -->
    <link href="//fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext"
          rel="stylesheet">
    <!-- //web-fonts -->
</head>

<body>
<div class="main-bg">
    <!-- title -->
    <h1>Python数据分析</h1>
    <!-- //title -->
    <div class="sub-main-w3">
        <div class="image-style">

        </div>
        <!-- vertical tabs -->
        <div class="vertical-tab">
            <div id="section1" class="section-w3ls">
                <input type="radio" name="sections" id="option1" checked>
                <label for="option1" class="icon-left-w3pvt"><span class="fa fa-user-circle" aria-hidden="true"></span>登录</label>
                <article>
                    <form action="/login/" method="post">
                        {% csrf_token %}
                        <h3 class="legend">Login Here</h3>
                        <div class="input">
                            <span class="fa fa-user-o" aria-hidden="true"></span>
                            <input type="text" placeholder="username" name="username" required/>
                        </div>
                        <div class="input">
                            <span class="fa fa-key" aria-hidden="true"></span>
                            <input type="password" placeholder="password" name="password" required/>
                        </div>
                        {% if message %}
                            <div class="message">
                                <p class="err_msg"><span style="color: red">{{ message }}</span></p>
                            </div>
                        {% endif %}
                        <button type="submit" class="btn submit">登录</button>
{#                        <a href="#" class="bottom-text-w3ls">忘记密码</a>#}
                    </form>
                </article>
            </div>
            <div id="section2" class="section-w3ls">
                <input type="radio" name="sections" id="option2">
                <label for="option2" class="icon-left-w3pvt"><span class="fa fa-pencil-square"
                                                                   aria-hidden="true"></span>注册</label>
                <article>
                    <form action="/register/" method="post">
                        {% csrf_token %}
                        <h3 class="legend">Register Here</h3>
                        <div class="input">
                            <span class="fa fa-user-o" aria-hidden="true"></span>
                            <input type="text" placeholder="username" name="username" required/>
                        </div>
                        <div class="input">
                            <span class="fa fa-key" aria-hidden="true"></span>
                            <input type="password" placeholder="password" name="password1" required/>
                        </div>
                        <div class="input">
                            <span class="fa fa-key" aria-hidden="true"></span>
                            <input type="password" placeholder="Confirm Password" name="password2" required/>
                        </div>
                        {% if message %}
                            <div class="message">
                                <p class="err_msg"><span style="color: red">{{ message }}</span></p>
                            </div>
                        {% endif %}
                        <button type="submit" class="btn submit">注册</button>
                    </form>
                </article>
            </div>
            <div id="section3" class="section-w3ls">
                <input type="radio" name="sections" id="option3">
{#                <label for="option3" class="icon-left-w3pvt"><span class="fa fa-lock" aria-hidden="true"></span>#}
{#                    忘记密码?</label>#}

                <label for="option3" class="icon-left-w3pvt">
                    </label>
                <article>
                    <form action="#" method="post">
                        <h3 class="legend last">Reset Password</h3>
                        <p class="para-style">Enter your email address below and we'll send you an email with
                            instructions.</p>
                        <p class="para-style-2"><strong>Need Help?</strong> Learn more about how to <a href="#">retrieve
                            an existing
                            account.</a></p>
                        <div class="input">
                            <span class="fa fa-user-o" aria-hidden="true"></span>
                            <input type="text" placeholder="username" name="name" required/>
                        </div>
                        <button type="submit" class="btn submit last-btn">Reset</button>
                    </form>
                </article>
            </div>
        </div>
        <!-- //vertical tabs -->
        <div class="clear"></div>
    </div>
    <!-- copyright -->
    <div class="copyright">
        <h2>&copy; 2020.All rights reserved | Design by
            <a href="" target="_blank">dry</a>
        </h2>
    </div>
    <!-- //copyright -->
</div>

</body>

</html>